<template>
	<div id="my">
		<!-- 顶部登陆 -->
		<div id="header1" class="container  d-none d-sm-none d-md-none d-lg-block top-bar text-center text-muted">
			<div class="row">
				<div class="top-bar-1 col-md-2">
					<a href="">
						<i class="zi zi_tmWeixin header-weixin" style="margin-right: 0.3125rem;"></i>
						<span>关注公众号</span>
						<!-- 使用vue传参 -->
						<img :src="public_img" width="120px" height="120px">
					</a>
				</div>
				<div class="top-bar-2 col-md-5">
					<a href="">
						<i class="zi zi_tmQq" zico="qq"></i>
						<span>广告联系QQ：12345678(时间9:00--17:00)</span>
					</a>
				</div>

				<div class="top-bar-3 col-md-2 overflow-hidden">
					<a href="">
						<span>学长学姐 更放心!</span>
					</a>
				</div>

				<div class="top-bar-4 col-md-3">
					<!-- 未登录 -->
					<div class=" d-sm-block" v-if="!islogin">
						<a href="#" class="btn btn-primary btn-sm bt-logo" data-toggle="modal" data-target="#exampleModalCenter_login">登陆</a>
						<a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#exampleModalCenter_regis">免费注册</a>
					</div>
					<div class="top-bar-4 col-md-3" v-if="islogin">
						<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
						 aria-haspopup="true" aria-expanded="false">
							个人中心
						</button>
						<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
							<router-link class="dropdown-item" to="/myindex/perfun/0">个人首页</router-link>
							<a class="dropdown-item" href="#" @click="exit()">退出登陆</a>
						</div>
					</div>
					<!-- 登陆后 -->
				</div>


			</div>
		</div>
		<!-- /顶部登陆 -->
		<!-- 导航栏 -->
		<div id="header2">
			<nav class="navbar navbar-expand-lg navbar-light bg-light ">
				<div class="container">
					<a class="navbar-brand" href="#">真香博客</a>
					<button class="navbar-toggler show" id="toggler-phone" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent1">
						<ul class="navbar-nav mr-auto header2-navbar">
							<li class="nav-item">
								<router-link class="nav-link" to="/index">首页</router-link>
							</li>

							<li class="nav-item">
								<router-link class="nav-link" to="/tools">工具</router-link>
							</li>
							<li class="nav-item">
								<router-link class="nav-link" to="/content/0">文章详情(临时)</router-link>
							</li>
							<li class="nav-item">
								<router-link class="nav-link" to="/edit/0">发布文章</router-link>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
									个人中心(临时)
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
									<router-link class="dropdown-item" to="/guidang">个人归档</router-link>
									<div class="dropdown-divider"></div>
									<router-link class="dropdown-item" to="/guidang">个人归档</router-link>
									<div class="dropdown-divider"></div>
									<router-link class="dropdown-item" to="/guidang">个人归档</router-link>
								</div>
							</li>
							<li class="nav-item   d-sm-block d-md-block d-lg-none">
								<a class="nav-link " href="#" data-toggle="modal" data-target="#exampleModalCenter_login">登陆</a>
								<a class="nav-link " href="#" data-toggle="modal" data-target="#exampleModalCenter_regis">注册</a>
							</li>

						</ul>
						<form class="form-inline my-2 my-lg-0">
							<input class="form-control mr-sm-2" type="search" placeholder="搜索文章" aria-label="Search">
							<button class="btn btn-outline-success my-2 my-sm-0" type="button" @click="msg1()">搜索</button>
						</form>
					</div>
				</div>
			</nav>
			<!-- 登陆 -->
			<!-- Button trigger modal -->
			<!-- Modal -->
			<div class="modal fade" id="exampleModalCenter_login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
			 aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-body">
							<form>
								<div class="form-group">
									<label for="">邮箱</label>
									<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="邮箱" v-model="userinfo.userEmil">
								</div>
								<div class="form-group">
									<label for="">密码</label>
									<input type="password" class="form-control mima" placeholder="请输入密码" v-model="userinfo.userPassword">
								</div>
								<div class="form-check">
									<input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="userinfo.deposit">
									<label class="form-check-label" for="exampleCheck1">是否记住密码</label>
								</div>

							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" @click="login()">登陆</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /登陆 -->
			<!-- 注册 -->
			<div class="modal fade" id="exampleModalCenter_regis" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
			 aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<div class="modal-body">
							<form>
								<div class="form-group">
									<label for="exampleInputEmail1">昵称</label>&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;" class="nameError"></span>
									<span style="color: green;" class="nameOK"></span>
									<input type="text" class="form-control name" placeholder="您在本平台的昵称,建议中文" v-model="userinfo.name" @blur="checkname()">
								</div>
								<div class="form-group ">
									<label for="exampleInputEmail1">邮箱</label>&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;" class="emailError"></span>
									<span style="color: green;" class="emailOK"></span>
									<input type="email" class="form-control email" placeholder="邮箱" v-model="userinfo.email" @blur="checkemail()">
								</div>
								<div class="form-group">
									<label for="exampleInputuserinfo.pwd1">密码</label>&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;" class="pwdError"></span>
									<span style="color: green;" class="pwdOK"></span>
									<input type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')" class="form-control pwd" placeholder="请输入密码" v-model="userinfo.pwd" @blur="checkpwd()">
								</div>
								<div class="form-group">
									<label for="exampleInputuserinfo.pwd1">重复密码</label>&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;" class="repwdError"></span>
									<span style="color: green;" class="repwdOK"></span>
									<input type="password" class="form-control repwd" placeholder="请再次输入密码" @blur="checkrepwd()" v-model="userinfo.repwd">
								</div>
								<div class="form-group ">
									<label for="inputuserinfo.pwd">验证码</label>&nbsp;&nbsp;&nbsp;&nbsp;
									<span style="color: red;" class="verificationError"></span>
									<div class="input-group">
										<input type="text" class="form-control verification" placeholder="请输入邮箱验证码" v-model="userinfo.verification">
										<span class="input-group-append btn btn-primary" id="sendbtn" @click="sendcode()">发送验证码</span>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" @click="register()">注册</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /注册 -->
		</div>
		<!-- /导航栏 -->
		<!-- 个人中心,信息修改 -->
		<!-- 居中 -->
		<div class="container ">

		</div>

	</div>
</template>
<script>
	var f = true;
	export default {
		name: "App-Nav",
		data() {
			return {
				list: [],
				public_img: 'https://pic.downk.cc/item/5e947ac1c2a9a83be5172de7.jpg',
				//是否记住密码
				userinfo: {
					userEmil:'',
					userPassword:'',
					deposit: false,
					email: '',
					pwd: '',
					iphone: '',
					verification: '',
					repwd: '',
				},
				// 是否登陆
				islogin: false,
			};
		},
		methods: {
			msg1: function() {
				alert("别搜索了，没有样式")
			},
			login:function() {
				var firstOne =document.getElementsByClassName("firstOne");
				var secondOne =document.getElementsByClassName("secondOne");
				if (this.userinfo.userEmil == "" && this.userinfo.userPassword == "") {
					alert("请输入用户名或者密码")
					return
				}
				//alert("用户名:" + this.userinfo.name + "\n密码:" + this.userinfo.pwd + "\n 是否记住密码:" + this.userinfo.deposit)
				let than=this;
				$.ajax({
					dataType:'json',//服务器返回json格式数据
					 //async: false, //是否为当前的请求触发全局AJAX事件处理函数  //添加async:false.即修改为同步 ;等ajax给bol赋值完毕后，才执行下面的js部分。而异步的话，还没有来得及赋值，就已经return了。
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					url:'http://localhost:9000/login',
					//加上 xhrFields及crossDomain
					xhrFields: {
						withCredentials: true//允许带上cookies
					},
					crossDomain: true,
					data:{
						"userEmil":than.userinfo.userEmil,
						"userPassword":than.userinfo.userPassword,
					},

					success:function(data){
						//console.log(data);
						//console.log(data.flag);
						//console.log(data.data.userId);
						if(data.flag){
							alert("登录成功");
							//点击显示模态框点击自身以外隐藏模态框
							$('#exampleModalCenter_login').modal("hide")
							than.islogin = !than.islogin
							window.sessionStorage.setItem("userId", data.data.userId)
							window.sessionStorage.setItem("userEmail", than.userinfo.userEmil)
							//than.shows =!than.shows
							//console.log(than.userinfo.deposit)
							//console.log(response);
							//console.log(data.data.userId)
							// 获取到session中的值
// 							window.sessionStorage.getItem('userId')
// 							window.sessionStorage.getItem('userEmail')  
// 							console.log(window.sessionStorage.getItem('userId'))  验证session中id值
// 							console.log(window.sessionStorage.getItem('userEmail'))验证session中邮箱值
							
						}else{
							alert(data.message);
							window.location.reload();
						}
					},
					error:function(data){
						console.log(data);
						alert("登录异常，请联系管理员");
					}
				});
				
			},
			exit() {
				let that = this
				console.log("关闭")
				window.sessionStorage.clear()
				window.location.reload();
				mima.innerText.value=''
        this.islogin = !this.islogin
        this.$router.push("/index")
			},
			checkname: function() {
				//昵称失去焦点事件
				var name = document.getElementsByClassName("name")[0];
				var nameError = document.getElementsByClassName("nameError")[0];
				var nameOK = document.getElementsByClassName("nameOK")[0];
				name.value = name.value.replace(/\s*/g, ""); //去除空格
				if (name.value != "") { //判断是否为空
					var realLength = 0,
						len = name.value.length,
						charCode = -1;
					for (var i = 0; i < len; i++) { //计算昵称的长度
						charCode = name.value.charCodeAt(i);
						if (charCode >= 0 && charCode <= 128)
							realLength += 1;
						else
							realLength += 2;
					}
					if(realLength<13){			//字符长度最大12
						nameError.innerText = "";
						nameOK.innerText="OK";
					}else{
						nameError.innerText = "昵称最大12个字符";
						nameOK.innerText="";
					}
				} else {
					nameError.innerText = "请输入您的昵称";
					nameOK.innerText="";
				}
			},
			checkemail: function() {
				//邮箱失去焦点事件
				var email = document.getElementsByClassName("email")[0];
				var emailError = document.getElementsByClassName("emailError")[0];
				var emailOK = document.getElementsByClassName("emailOK")[0];
				if(email.value!=""){//判断是否为空
					var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;//判断邮箱格式是否合法
					if(re.test(email.value)){
						this.axios.get("http://localhost:9000/hjk/phoneisok/" + this.userinfo.email).then(function(response) {
							if(!response.data.flag){//判断邮箱是否存在
								emailError.innerText="该邮箱已存在，请更换您的邮箱";
								emailOK.innerText="";
							}else{
								emailError.innerText="";
								emailOK.innerText="OK";
							}
						})
					}else{
						emailError.innerText="您的邮箱不合法，请修改您的邮箱";
						emailOK.innerText="";
					}
				}else{
					emailError.innerText="请输入您的邮箱";
					emailOK.innerText="";
				}
			},
			checkpwd: function() {
				//密码失去焦点事件
				var pwd = document.getElementsByClassName("pwd")[0];
				var pwdError = document.getElementsByClassName("pwdError")[0];
				var pwdOK = document.getElementsByClassName("pwdOK")[0];
				if(pwd.value!=""){
					var reg=/^(\w){6,18}$/;
					if(reg.test(pwd.value)){
						pwdError.innerText="";
						pwdOK.innerText="OK";
					}else{
						pwdError.innerText="请输入6-18位字母或数字";
						pwdOK.innerText="";
					}
				}else{
					pwdError.innerText="请输入您的密码";
					pwdOK.innerText="";
				}
			},
			checkrepwd: function() {
				//重复密码失去焦点事件
				var repwdError = document.getElementsByClassName("repwdError")[0];
				var repwdOK = document.getElementsByClassName("repwdOK")[0];
				if (this.userinfo.pwd != this.userinfo.repwd) {
					repwdError.innerText = "两次密码不一致,请重新输入";
					repwdOK.innerText = "";
				} else {
					repwdError.innerText = "";
					repwdOK.innerText = "OK";
				}
			},
			sendcode: function() {
				//点击发送验证码事件
				var emailError = document.getElementsByClassName("emailError")[0];
				var emailOK = document.getElementsByClassName("emailOK")[0];
				var verificationError = document.getElementsByClassName("verificationError")[0];
				if (emailError.innerText == "" & emailOK.innerText == "OK") {
					if (f) { //判断发送事件
						this.axios.get("http://localhost:9000/hjk/email/" + this.userinfo.email).then(function(response) {

							if (response.data.flag) { //判断邮件是否发送成功
								f = false;
								verificationError.innerText = "";
								alert("邮件发送成功，请注意查收")
								$("#c").html("倒计时60秒");
								var num = 60;
								var sid = setInterval(function() {
									if (num > 0) {
										num--;
										$("#sendbtn").html("倒计时" + num + "秒");
									} else {
										clearInterval(sid);
										$("#sendbtn").html("重新发送");
										f=true;
									}
								}, 1000);
							} else {
								verificationError.innerText = "邮件发送失败，请检查您的邮箱是否正确";
							}
						})
						alert("发送中，请等待");
					} else {
						alert("操作频繁，请稍后")
					}
				} else {
					verificationError.innerText = "邮箱异常，无法发送验证码"
				}
			},
			register: function() {
				//点击注册事件
 				var nameOK = document.getElementsByClassName("nameOK")[0];
 				var emailOK = document.getElementsByClassName("emailOK")[0];
 				var pwdOK = document.getElementsByClassName("pwdOK")[0];
 				var repwdOK = document.getElementsByClassName("repwdOK")[0];
 				var verificationError = document.getElementsByClassName("verificationError")[0];
 				var verification = document.getElementsByClassName("verification")[0];
 				verification.value = verification.value.replace(/\s*/g, "");
 				if (verification.value != "" & nameOK.innerText == "OK" & emailOK.innerText == "OK" & pwdOK.innerText == "OK" &
 					repwdOK.innerText == "OK") {
 					let than = this;
 					$.ajax({
 						url: 'http://localhost:9000/hjk/register',
 						data: {
 							"name": than.userinfo.name,
 							"email": than.userinfo.email,
 							"password": than.userinfo.pwd,
 							"verification": than.userinfo.verification
 						},
 						xhrFields: {
 							withCredentials: true
 						},
 						dataType: 'json', //服务器返回json格式数据
 						type: 'post', //HTTP请求类型
 						timeout: 10000, //超时时间设置为10秒；
 						success: function(data) {
 							console.log(data);
 							if (data.flag) {
 								alert("注册成功，点击确定返回首页");
 								window.location.reload();
 							} else {
 								if (data.code != 20000) {
 									alert(data.message)
 								}
 							}
 						},
 						error: function() {
 							alert("注册异常，请联系管理员");
 						}
 					});
 					alert("验证中,请稍后");
 				} else {
 					alert("请检查表单信息，是否完善和正确");
 				}
			}
		}
	,created() {
	  if(window.sessionStorage.getItem("userEmail")!=undefined && window.sessionStorage.getItem("userId")!= undefined){
      this.islogin=true
    }
	}
  }
</script>

<style scoped>
	ul,
	li {
		list-style: none;
	}

	a:hover {
		text-decoration: none;
	}

	a {
		color: #000000;
	}

	/* 头部 */
	.row {
		height: 2.5rem;
		line-height: 2.4375rem;
		border-bottom: 0.0625rem gray solid;
	}

	.header-weixin {
		font-size: 20px;
		color: green;
	}

	.top-bar .row>div+div {
		border-left: 0.0625rem solid gray;
	}

	.top-bar .row .top-bar-1 a {
		position: relative;
	}

	.top-bar .row .top-bar-1 a {
		position: relative;
	}

	.top-bar .row .top-bar-1 a img {
		position: absolute;
		top: 30px;
		left: 50%;
		z-index: 999;
		transform: translateX(-50%);
		display: none;
	}

	.top-bar .row .top-bar-1 a:hover img {
		display: block;
	}

	.top-bar .row .top-bar-4 .bt-logo {
		width: 4.875rem;
		margin-right: 0.625rem;
	}

	/* 导航栏 */
	#header2 {
		height: 3.5rem;
		position: relative;
		/* z-index: 1200 !important; */
	}

	#header2 .header2-navbar>li>a {
		border-bottom: 0.125rem solid rgba(0, 0, 0, 0);
		margin-left: 1.875rem;
	}

	#header2 .header2-navbar>li>a:hover {
		border-bottom: 0.125rem solid dodgerblue;
	}

	#exampleModalCenter_regis .yzm {
		margin-left: 0rem;
		margin-bottom: 1rem;
	}
</style>
